<template>
  <div class="orderDesc">
    <!-- 订单状态 -->
    <div class="orderState">
      <p>{{ stateText }}</p>
      <span>{{ secondText }}</span>
      <img src="@/assets/car.png" alt="" class="car" v-show="carShow">
    </div>
    <!-- 收货信息 -->
    <div class="receiveInfo">
      <div>
        <div>
          <span class="iconfont"></span>
          <span class="receivePeople">收货人：{{ nickname }}</span>
        </div>
        <span class="receiveTel">联系电话：{{ tel }}</span>
      </div>
      <p>收货地址：{{ address }}</p>
    </div>
    <orders :countShow="true" :info="good_info" :cancel="isCancel"></orders>
    <!-- 订单信息 -->
    <div class="orderInfo">
      <p>订单编号：{{ order_no }}</p>
      <p>创建时间：{{ time }}</p>
      <p class="liuyan">买家留言：{{ user_note }}</p>
    </div>
    <!-- 操作区域 -->
    <div class="handle">
      <span>客服电话：<a :href="'tel:'+ kefu_tel">{{ kefu_tel }}</a></span>
      <div class="payHandle" v-show="pay_status == 1">
        <input type="button" value="付款" class="pay" @click="pay" v-show="good_info.pay_style === 'wx_jsapi'">
        <input type="button" value="取消订单" class="cancelOrder" @click="cancelOrder">
      </div>
      <a class="callKeFu" :href="'tel:'+ kefu_tel" v-show="pay_status == 2">联系客服</a>
    </div>
    <shade v-show="loadShow"/>
  </div>
</template>

<script>
import orders from "./orders.vue";
import configWxPayApi from "@/utils/configWxPayApi.js";
import payByWx from "@/utils/payByWx.js";
import wx from "weixin-js-sdk";
import { getOrderInfo, cancelOrder, isLogin, OrderPay_wxh5 } from "@/api/index";
export default {
  data() {
    return {
      loadShow: true,
      kefu_tel: this.$store.state.kefu_tel,
      openid: "",
      isCancel: false,
      carShow: false,
      stateText: "",
      secondText: "",
      childHandle: false,
      good_info: this.$route.params.info,
      pay_status: this.$route.params.info.pay_status,
      time: this.$route.params.info.time,
      express_number: this.$route.params.info.express_number,
      order_no: this.$route.params.info.order_no,
      user_note: this.$route.params.info.user_note,
      nickname: this.$route.params.info.nickname,
      tel: this.$route.params.info.tel,
      address:
        this.$route.params.info.province +
        this.$route.params.info.city +
        this.$route.params.info.area +
        " " +
        this.$route.params.info.address
    };
  },
  components: {
    orders
  },
  created() {
    this.$store.commit("SETPAGEINFO", {
      title: "订单详情",
      description: ""
    });
    if (this.pay_status == 1 && this.good_info.pay_style === 'wx_jsapi') {
      this.stateText = "等待您付款";
      this.secondText = "请您尽快付款，超时订单过期";
    } else {
      if (this.express_number == "") {
        this.stateText = "等待商家发货";
        this.secondText = "别着急哦，商家准备发货中";
      } else {
        this.stateText = "商家已发货";
        this.secondText = "快递单号：" + this.express_number;
        this.carShow = true;
      }
    }

    configWxPayApi();
    wx.ready(() => {});
    wx.error(function(res) {
      // alert(res);
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
    isLogin().then(result => {
      this.loadShow = false;
      this.openid = result.data.openid;
    });
  },
  methods: {
    cancelOrder() {
      cancelOrder(this.order_no).then(result => {
        if (result.data.success == "yes") {
          this.$toast({
            message: "订单取消成功",
            iconClass: "iconfont icon-dagou_wuquan"
          });
          this.stateText = "交易关闭";
          this.secondText = "订单已取消";
          this.isCancel = true;
          this.pay_status = 2;
        } else {
          this.$toast({
            message: result.data.message,
            iconClass: "iconfont icon-X"
          });
        }
      });
    },
    pay() {
      if (this.$store.state.loginType == "h5") {
        OrderPay_wxh5(this.order_no).then(results => {
          const rdirectUrl =
            "http://www.chamiw.com/App/dist/#/paySuccess/" + this.order_no;
          location.href =
            decodeURIComponent(results.data.mweb_url) +
            "&redirect_url=" +
            encodeURIComponent(rdirectUrl);
        });
      } else {
        payByWx(
          this.order_no,
          this.openid,
          this.good_info,
          this.good_info.totalPrice,
          this
        );
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.orderDesc {
  // 状态
  background-color: #fafafa;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .orderState {
    position: relative;
    height: to(98);
    background: -webkit-linear-gradient(
      left,
      #c03030,
      #d94848
    ); /* Safari 5.1 - 6.0 */
    font-size: to(24);
    color: white;
    margin-top: to(15);
    padding-left: to(17);
    span {
      font-size: to(22);
    }
    p {
      line-height: to(51);
    }
    .car {
      width: to(116);
      position: absolute;
      right: 15%;
      top: to(8);
    }
  }
  .receiveInfo {
    height: to(88);
    background-color: #fff;
    padding: 0 to(15);
    margin: to(15) 0;
    div:nth-child(1) {
      display: -webkit-flex;
      span {
        font-size: to(24);
        line-height: to(35);
        // vertical-align: top;
      }
      div {
        flex: 1;
        .receivePeople {
          color: #000;
        }
        .receiveTel {
          color: #5b5b5b;
          flex: 1;
          text-align: rightl;
        }
      }
    }
    p {
      font-size: to(21);
      color: #5b5b5b;
      line-height: to(50);
      margin: 0;
    }
  }
  .orderInfo {
    margin: to(15) 0;
    background-color: #fff;
    p {
      font-size: to(20);
      color: #858585;
      line-height: to(35);
      padding-left: to(15);
      &.liuyan {
        margin-top: to(10);
      }
    }
  }
  .handle {
    height: to(85);
    font-size: to(25);
    padding: 0 to(15);
    position: fixed;
    bottom: 0;
    width: 100%;
    span {
      line-height: to(85);
      font-size: to(22);
      color: #858585;
      a {
        color: #00a2ee;
        text-decoration: none;
      }
    }
    .payHandle {
      float: right;
      input {
        float: right;
        height: to(43);
        width: to(124);
        margin-top: to(21);
        border-radius: to(5);
        text-align: center;
        -webkit-appearance: none;
        &.cancelOrder {
          background-color: #fff;
          border: 1px solid #ccc;
          color: #000;
        }
        &.pay {
          background-color: #c03030;
          border: 0;
          margin-left: to(52);
          color: white;
        }
      }
    }
    .callKeFu {
      text-decoration: none;
      float: right;
      width: to(104);
      height: to(43);
      line-height: to(48);
      border-radius: to(10);
      border: 1px solid #00a2ee;
      text-align: center;
      color: #00a2ee;
      margin-top: to(16);
      padding: to(5);
      box-sizing: content-box;
    }
  }
}
</style>
